<template>
  <div class="table-containner">
    <div class="tableTop">
      <el-form :inline="true"  class="demo-form-inline"  size="mini" >
        <el-form-item label="物联网关列表" style="margin-right: 40px">
        </el-form-item>
        <el-form-item class="normalLabel" label="物联网关编号:">
          <el-input v-model="webGatePid"></el-input>
        </el-form-item>
        <el-form-item class="normalLabel" label="型号:">
          <el-input v-model="webGateSN"></el-input>
        </el-form-item>
        <el-form-item  style="margin-right: 6px">
          <el-button type="primary" @click="equipSearch()">查询</el-button>
          <el-button type="info" @click="equipReset">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" @click="addDialogTurn()">新增</el-button>
          <el-button class="theButton" @click="deletemore()" type="info">批量删除</el-button>
          <!--<el-button class="theButton" type="primary"  >导出</el-button>-->
        </el-form-item>
      </el-form>
    </div>
    <div class="pagination-container footerPage">
      <el-pagination
        @current-change="CurrentChange"
        @size-change="SizeChange"
        :page-sizes="[5, 10, 20, 50]"
        background layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <div  class="configtableList">
      <el-table
        :data="tableData"
        border
        stripe border fit highlight-current-row
        @select="toggleRowSelection"
        @select-all="toggleRowSelectionAll"
        style="width: 100%; max-height: 784px; overflow-y: auto"
        :height="784"
        :header-cell-style="{background:'#F7F8F9',padding:'5px 0px'}"
      >
        <el-table-column
          type="selection"
          width="40px"
        >
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60px"
        >
        </el-table-column>
        <el-table-column
          v-for="(column, index) in cols"
          :prop="column.prop"
          :label="column.label"
          :key="index"
          :show-overflow-tooltip="true"
          :width="column.width"
          :sortable="column.sortable"
        >
        </el-table-column>
        <el-table-column
          type="index"
          label="操作"
          width="102px"
        >
          <template slot-scope="scope">
            <el-button @click.native.prevent="detailDialog(scope.$index, scope.row)" class="tableIcon" title="查看" type="text">
              <i class="lookDetail"></i>
            </el-button>
            <el-button @click.native.prevent="redactDialog(scope.$index, scope.row)" class="tableIcon" title="编辑" type="text">
              <i class="redactDetail"></i>
            </el-button>
            <div class="equipDelete">
              <el-button  type="text" class="" title="删除" @click.native.prevent="deleteEquip(scope.$index, scope.row)">
                <i class="deleteEquip"></i>
              </el-button>
            </div>
            <orgdelete></orgdelete>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <web-add-dialog v-if="addDialogShow" @giveFalse="addDialogReturn"></web-add-dialog>
    <web-detail-dialog v-bind:userIndex="userIndex" v-bind:userRow="userRow" v-if="detailDialogShow" @giveFalse="detailDialogReturn"></web-detail-dialog>
    <web-redact-dialog v-bind:userIndex="userIndex" v-bind:userRow="userRow" v-if="redactDialogShow" @giveFalse="redactDialogReturn" ></web-redact-dialog>
  </div>
</template>
<script>
  import axios from 'axios'
  import orgdelete from '@/views/managementSide/mSiteAdmin/components/delete'
  import wraningDelete from '@/assets/components/wraningDelete.png'
  import webAddDialog from './webGateAdd'
  import webDetailDialog from './webGateDetail'
  import webRedactDialog from './webGateRedact'

  export default {
    components: {
      orgdelete,
      webAddDialog,
      webDetailDialog,
      webRedactDialog
    },
    data() {
      return {
        wraningDelete,
        // 查询条件
        webGatePid: '',
        webGateSN: '',
        cols: [
          { prop: 'asset_no', label: '物联网关编号', width: '160px', sortable: true },
          { prop: 'asset_name', label: '物联网关名称', width: '400px' },
          { prop: 'brand', label: '品牌' },
          { prop: 'model', label: '型号', width: '180px' },
          { prop: 'sn', label: '序列号', width: '180px' },
          { prop: 'create_time', label: '创建时间', width: '180px' },
          { prop: 'asset_status_label', label: '状态', width: '180px' }
        ],
        tableData: [],
        indexMethod: '',
        total: 0,
        // 换页
        siteListQuery: {
          page: 1,
          limit: 20,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        addDialogShow: false,
        detailDialogShow: false,
        redactDialogShow: false,
        // 总览接口
        webGateDataTable: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'asset_condition_get',
          data: {
            condition: {
              asset_name: '',
              model: ''
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        },
        // 删除
        delSubmitData: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'asset_del',
          data: {
            asset_no: []
          }
        }
      }
    },
    mounted() {
      this.webGateData()
    },
    methods: {
      toJSON() {},
      // 新增弹窗
      addDialogTurn() {
        this.addDialogShow = !this.addDialogShow
      },
      // 父组件传值
      // 点击控制dialog布尔值
      detailDialog(index, rows) {
        this.userIndex = index
        this.userRow = rows
        this.detailDialogShow = !this.detailDialogShow
      },
      redactDialog(index, rows) {
        this.userIndex = index
        this.userRow = rows
        this.redactDialogShow = !this.redactDialogShow
      },
      // 父组件接收值
      addDialogReturn(data) {
        this.addDialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        this.webGateData()
      },
      detailDialogReturn(data) {
        this.detailDialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        console.log(1111)
        console.log(data)
      },
      redactDialogReturn(data) {
        this.redactDialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        this.webGateData()
      },
      // 换页
      handleSizeChange(val) {
        this.siteListQuery.limit = val
        this.getwebGateDataTable()
      },
      handleCurrentChange(val) {
        this.siteListQuery.page = val
        this.tableData()
      },
      // 查询条件
      equipSearch() {
        this.webGateDataTable.data.condition.asset_name = this.webGatePid
        this.webGateDataTable.data.condition.model = this.webGateSN
        this.webGateData()
      },
      // 查询重置
      equipReset() {
        this.webGateDataTable.data.condition.asset_name = ''
        this.webGatePid = ''
        this.webGateDataTable.data.condition.model = ''
        this.webGateSN = ''
        this.webGateData()
      },
      // 总览接口
      webGateData() {
        axios.post('/asset', this.webGateDataTable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.tableData = res.data.data.items
          this.total = parseInt(res.data.data.page.total)
          // console.log(this.tableData)
          console.log(res)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 单个删除
      deleteEquip(index, rows) {
        var deleteid = []
        console.log(rows)
        deleteid.push(rows.asset_no)
        console.log(deleteid)
        this.delSubmitData.data.asset_no = deleteid
        console.log(this.delSubmitData.data.asset_no)
        this.$confirm('确认删除网关？', '提示', {
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log()
          axios.post('/asset', this.delSubmitData, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            console.log(res)
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.delSubmitData.data.asset_no = []
            this.webGateData()
          })
            .catch((error) => {
              console.log(error)
              this.$message({
                type: 'error',
                message: error.data.errmsg
              })
            })
        }).catch(() => {
        })
      },
      // 多个删除
      // 选择设备
      toggleRowSelection(row) {
        this.webGates = []
        console.log(row)
        for (var i = 0; i < row.length; i++) {
          this.webGates.push(row[i].asset_no)
          // console.log(this.webGates)
        }
        this.delSubmitData.data.asset_no = this.webGates
        // console.log(this.delSubmitData.data.asset_no)
      },
      toggleRowSelectionAll(row) {
        this.webGates = []
        console.log(row)
        for (var i = 0; i < row.length; i++) {
          this.webGates.push(row[i].asset_no)
          // console.log(this.webGates)
        }
        this.delSubmitData.data.asset_no = this.webGates
        // console.log(this.delSubmitData.data.asset_no)
      },
      deletemore() {
        if (this.delSubmitData.data.asset_no.length === 0) {
          this.$message.error('请勾选要删除的物联网关!')
        } else {
          this.$confirm('确认删除网关？', '提示', {
            cancelButtonClass: 'userCancel',
            confirmButtonClass: 'userConfirm',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            axios.post('/asset', this.delSubmitData, {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then((res) => {
              console.log(res)
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.delSubmitData.data.asset_no = []
              this.webGateData()
            }).catch((error) => {
              console.log(error)
              this.$message({
                type: 'error',
                message: error.data.errmsg
              })
            })
          }).catch(() => {
          })
        }
      },
      // 当前页
      CurrentChange(val) {
        this.webGateDataTable.data.page.page_number = (val) + ''
        this.webGateData()
      },
      // 每页显示多少条
      SizeChange(pageSize) {
        this.webGateDataTable.data.page.page_size = (pageSize) + ''
        this.webGateData()
      }
    }
  }
</script>
<style scoped>
  .table-containner {
    min-width: 1546px;
    min-height: 870px;
  }
  .tableTop {
    width: 100%;
    min-height: 50px;
    background-color: #F0F3F5;
    font-size:14px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(105,114,126,1);
    line-height: 20px;
    padding: 12px 20px 0px 20px;
  }
  .configtableList{
    width: 100%;
    min-height:20vw;

  }
  .footerPage{
    float: right;
    right: 1px;
    top: 0;
    position: relative;
  }
  /**********搜索栏样式修改***********/
  /deep/ .el-form-item--mini.el-form-item{
    margin-bottom: 12px;
  }
  /deep/ .theButton {
    margin-left: 5px !important;
  }
  /deep/ .normalLabel .el-form-item__label{
    font-weight: normal;
    color: #69727E;
  }
  /***********************操作列样式**************************/
  /deep/ .tableIcon {
    padding: 0px;
    font-size: 20px;
    font-weight: 500;
  }
  /deep/ .el-button+.el-button{
    margin-left: 3px;
  }
  .deleteEquip{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../../../../assets/reports/delete_normal.png');
  }
  .deleteEquip:hover{
    background-image: url('../../../../assets/reports/delete_hover.png');
  }
  .redactDetail{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../../../../assets/reports/redact_normal.png');
  }
  .redactDetail:hover{
    background-image: url('../../../../assets/reports/redact_hover.png');
  }
  .lookDetail{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../../../../assets/reports/detail_normal.png');
  }
  .lookDetail:hover{
    background-image: url('../../../../assets/reports/detail_hover.png');
  }
  /deep/ .equipDelete {
    display: inline-block;
  }
  /deep/ .overviewDropdown {
    width:74px;
    margin-left: 5px;
    top: -4px;
    cursor: pointer;
  }
  /deep/ .el-dropdown-link {
    border: 2px solid;
    border-right: 0px;
    border-right: 4px solid;
    font-size: 10px;
    padding:2px;
    color: #52C8A1;
  }
  .el-popper[x-placement^="bottom"] {
    margin-top: 12px;
    width: 98px;
    color: #e0e0e0;
  }
  /deep/ .associatedbuttom {
    text-align: left;
    color: #323842;
    border: none;
    margin-left: 5px;
    padding: 10px;
    height: 24px;
    width: 88px;
    font-size: 12px;
  }
  /deep/ .associatedbuttom:hover {
    background: #c7f9e6;
    color: #2bbc8c;
  }
  /**********表格**********/
  /deep/ .el-table td{
    padding: 3px 0 !important;
  }
</style>
